<template>
    <div class="layout-table">
      <h2>课程内容列表</h2>
      <div class="layout-table-button">
          <div class="search-content">
            <el-input v-model="courseInfo.id" placeholder="请输入课程内容ID..."></el-input>
          </div>
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button type="info" @click="reset()">重置</el-button>
          <el-button type="primary" @click="toPath('AddCourseContent')">添加课程内容</el-button>
          <el-button type="primary" @click="toPath('')">返回首页</el-button>
      </div>
      <div class="layout-table-content">
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange" >
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              fixed
              prop="id"
              label="课程内容ID"
              width="200">
          </el-table-column>
          <el-table-column
              fixed
              prop="courseId"
              label="课程ID"
              width="100">
          </el-table-column>
          <el-table-column
              prop="name"
              label="课程名字"
              width="200"
              :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
              prop="chapterName"
              label="章名字"
              width="200"
              :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
              prop="periodName"
              label="小节名字"
              width="200"
              :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
              prop="courseDetail"
              label="课程内容详情ID"
              width="220">
          </el-table-column>

          <el-table-column
              prop="createTime"
              label="创建时间"
              sortable
              :sort-orders="['ascending', 'descending']"
              width="200">
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="primary" plain size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="layout-table-foot">

        <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

      </div>

    </div>
</template>

<script>
import {courseContentList} from '@/api/api'

export default {
  name: "CourseContentList",
  created() {

    let param = {
      ...this.courseInfo
    }
    courseContentList(param).then(res =>{
      if(res.code == 200){
        this.total = res.data.total
        this.tableData = res.data.records
      }
    })
  },
  data(){
    return {
      currentPage: 1,
      pagesize:10,
      total: 0,
      courseInfo:{
        current: 1,
        size: 10,
        id: ''
      },
      tableData:[],
      multipleSelection: [],
    }
  },
  methods:{
    handleClick(row) {
      console.log(row);
      this.$router.push({path:'/EditCourseContent',
        query: {periodId:row.periodId,courseId:row.courseId,periodName:row.periodName,id:row.id,courseDetail:row.courseDetail}})
    },
    handleCurrentChange(val) {
      this.courseInfo.current = val
      this.search()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toPath(value){
      this.$router.push({
        path:'/'+value
      })
    },
    search(){

      let param = {
        ...this.courseInfo
      }
      courseContentList(param).then(res =>{
        if(res.code == 200){
          this.total = res.data.total
          this.tableData = res.data.records
        }
      })
    },
    reset(){
      this.courseInfo.id = ''
    }

  }
}
</script>

<style scoped>
  .layout-table{
      margin: 30px 200px 0 200px;
      width: 1500px;
  }

  .search-content{
    float: left;
    margin: 0 10px 0 0;
  }

  .layout-table-button,.layout-table-foot{
    margin: 10px 0 10px 0;
    float: right;
  }


</style>